<template>
  <div ref="login" id="login">
    <article class="loginform">
      <section>
        <input v-model="user" placeholder="请输入用户名">
        <input type="password" v-model="password" placeholder="请输入密码">
      </section>
      <section>
        <button type="primary" @click="submit">登录</button>
      </section>
    </article>
  </div>
</template>

<script>
import { doLogin } from '@/api/questions'
import { getCode } from '@/utils/dingding'

export default {
  name: 'login',
  data () {
    return {
      user: '',
      password: '',
      ddaccount: ''
    }
  },
  mounted () {
    var __this = this
    var size = this.getViewportSize()
    __this.$refs.login.style.height = size.height + 'px'
    __this.doDingdingLogin()
  },
  methods: {
    getViewportSize () {
      return {
        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      }
    },
    doDingdingLogin () {
      var _that = this
      getCode(code => {
        console.log(code)
        if (code !== null && code !== '') {
          // 根据code获取用户信息，后台处理
          _that.$router.push({path: '/Index'})
        }
      })
    },
    submit () {
      if (!this.user || !this.password) {
        this.$message.error('请输入账号密码')
        return
      }

      var _that = this
      doLogin(_that.user, _that.password).then((res) => {
        var data = res.data
        if (data.errno === 0) {
          _that.$router.push({path: '/choice'})
        } else {
          _that.$message.error('账号或密码错，请重新输入')
          _that.user = ''
          _that.password = ''
        }
      }).catch(err => {
        _that.$message.error('服务器访问异常，请稍后再试')
        console.log(err)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#login {
  background: url("../assets/loginBg.jpg") no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}

.loginform {
  position: absolute;
  top: 50%;
  width: 100%;
}

section input {
  display: block;
  margin: 20px auto;
  width: 75%;
  height: 50px;
  font-size: 1.5em;
  color: #eee;
  border-radius: 30px;
  border: none;
  text-indent: 3em;
  border: none;
  outline: none;
}

section input:nth-child(1) {
  background: rgba(20, 20, 20, .5) url("../assets/user.png") no-repeat;
  background-size: 22px 22px;
  background-position: 5%;
}

section input:nth-child(2) {
  background: rgba(20, 20, 20, .5) url("../assets/password.png") no-repeat;
  background-size: 22px 22px;
  background-position: 5%;
}

input::-webkit-input-placeholder {
  color: #eee;
}

input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #eee;
}

input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #eee;
}

input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #eee;
}

section button {
  display: block;
  margin: 20px auto 32px;
  width: 75%;
  height: 50px;
  background-color: rgba(51, 125, 253, 0.93);
  outline: none;
  border: none;
  border-radius: 31px;
  color: white;
  font-size: 1.5em;
  letter-spacing: 1em;
}
</style>
